<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/vaadin-dialog/vaadin-dialog.html">
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">

<dom-module id="schedule-edit-mrc">
    <template>
        <style include="shared-styles dialogs">
            :host {
            }

            .submit-btn {
                background-color: var(--mist-blue);
                color: #fff;
            }

            paper-button {
                margin: 0 0.29em !important;
            }

        </style>

        <vaadin-dialog id="editMrcScheduleModal" theme="mist-dialog" with-backdrop>
            <template>
                <h2>Edit Maximum Run Count</h2>
                <div class="paper-dialog-scrollable">
                    <p>
                        <paper-input id="mrc" label="Maximum Run Count" value="{{newMaxRunCount}}"></paper-input>
                    </p>
                    <p>Leave blank and save to delete maximum run count constraint.</p>
                    <div class="clearfix btn-group">
                        <paper-button class="blue-link" dialog-dismiss on-tap="_closeEditScheduleModal">Cancel</paper-button>
                        <paper-button class="blue" disabled$="[[!formReady]]" on-tap="_submitForm">Save</paper-button>
                    </div>
                </div>
            </template>
        </vaadin-dialog>

        <iron-ajax  id="editSchedule"
                    url="/api/v1/schedules/[[schedule.id]]"
                    method="PATCH"
                    loading = {{sendingData}}
                    on-response="_handleScheduleEditResponse"
                    on-error="_handleScheduleEditError"></iron-ajax>
    </template>

    <script>
        (function() {
            'use strict';

            Polymer({
                is: 'schedule-edit-mrc',

                properties: {
                    schedule: {
                        type: Object
                    },
                    newMaxRunCount: {
                        type: Number
                    },
                    sendingData: {
                        type: Boolean,
                        value: false
                    }
                },
                observers: [
                    '_updateformReady(schedule, newMaxRunCount, sendingData)'
                ],
                listeners: {
                    'iron-overlay-closed': '_modalClosed'
                },
                _openEditScheduleModal: function(e) {
                    if (this.schedule) {
                        this.set('newMaxRunCount', this.schedule.max_run_count);
                        this.$.editMrcScheduleModal.opened = true;
                    }
                },
                _closeEditScheduleModal: function(e) {
                    this.$.editMrcScheduleModal.opened = false;
                },
                _modalClosed: function() {
                    this._formReset();
                },
                _submitForm: function(e) {
                    this.$.editSchedule.body = {max_run_count: this.newMaxRunCount};
                    this.$.editSchedule.headers["Content-Type"] = 'application/json';
                    this.$.editSchedule.headers["Csrf-Token"] = CSRF_TOKEN;
                    this.$.editSchedule.generateRequest();
                },
                _formReset: function() {
                    if (this.schedule) {
                        this.set('newMaxRunCount', this.schedule.max_run_count);
                    }
                },
                _handleScheduleEditResponse: function(e) {
                    this._closeEditScheduleModal();
                    this.dispatchEvent(new CustomEvent('toast', { bubbles: true, composed: true, detail: { msg: 'Updating max run count.', duration: 5000 } }));

                },
                _handleScheduleEditError: function(e) {
                    var message = e.detail.error;
                    if (e.detail.request.statusText)
                        message += " "+e.detail.request.statusText;

                    this.dispatchEvent(new CustomEvent('toast', { bubbles: true, composed: true, detail: { msg: message, duration: 5000 } }));

                },
                _updateformReady: function(schedule, newMaxRunCount, sendingData) {
                    // console.log(parseInt(this.newMaxRunCount), this.newMaxRunCount,  this.schedule.max_run_count)
                    if (this.sendingData) {
                        this.set('formReady', false);
                    } else if (!this.sendingData && this.schedule) {
                        this.set('formReady', (parseInt(this.newMaxRunCount) >= 0 || this.newMaxRunCount == "") && this.newMaxRunCount != this.schedule.max_run_count);
                    }
                }
            });
        })();
    </script>
</dom-module>
